
<template>
  <div class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper" @click="goBack">
          <span class="textTitle">
            <i
              class="fa fa-arrow-left"
              aria-hidden="true"
              style="color: #666"s
            ></i
            >&nbsp;&nbsp; {{ titleName }}</span
          >
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div slot="header">
          <div class="pie-tb-header">
            <div class="last-content">
              <div class="content">
                <div
                  class="content-item"
                  v-for="(item, index) in nodeData"
                  :key="index"
                >
                  <div
                    class="echarts-main-style border"
                    @click="transcriptListPush(item)"
                  >
                    <div class="echarts-right-content">
                      <div>
                        <span class="transcript-name">节点名称</span>
                        <span>{{ item.node }}</span>
                      </div>
                      <div>
                        <span class="transcript-name">命名空间</span>
                        <span>{{ item.namespace }}</span>
                      </div>
                      <div>
                        <span class="transcript-name">副本名称</span>
                        <span>{{ item.podName }}</span>
                      </div>
                      <div>
                        <span class="transcript-name">deployment</span>
                        <span>{{ item.deployment }}</span>
                      </div>
                      <div>
                        <span class="transcript-name">服务类型</span>
                        <span>{{ item.serviceType.description }}</span>
                      </div>
                    </div>
                    <div class="text-item">
                      <div class="process-style">
                        <!-- <div class="process-style-text">总内存使用量</div> -->
                        <div
                          :id="item.podName + '2'"
                          class="echarts-styles"
                        ></div>
                      </div>
                      <div class="process-style">
                        <!-- <div class="process-style-text">总CPU使用量</div> -->
                        <div
                          :id="item.podName + '1'"
                          class="echarts-styles"
                        ></div>
                      </div>
                      <div class="process-style">
                        <!-- <div class="process-style-text">总CPU使用率</div> -->
                        <div
                          :id="item.podName + '3'"
                          class="echarts-styles"
                        ></div>
                      </div>
                      <div class="process-style">
                        <!-- <div class="process-style-text">总CPU使用率</div> -->
                        <div
                          :id="item.podName + '4'"
                          class="echarts-styles"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CCardBody>
    </CCard>
  </div>
</template>
<script>
export default {
  name: "serviceManageDetial",
  data() {
    return {
      titleName: this.$route.query.serviceType,
      titleNameData: "", //标题头部变化数据
      // isProgressShow:false, //是否显示进度条
      // isTranscriptId:"",
      // isTranscriptType:"",
      chartsData: {},
      nodeData: [], //节点列表数据
      // servicDataList:[],  //服务监控信息
      optionTranscript000: {
        title: {
          text: "台站监测数据量统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["蒸发量", "降水量"],
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "蒸发量",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      },

      optionTranscript0: {
        //内存使用==图表
        title: {
          text: "内存使用",
          // text: "Memory area [heap]",
          left: "42%",
          bottom: "10px",
          textStyle: {
            color: "#98dcff",
            fontSize: "14px",
          },
        },
        color: ["#fe0029"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          top: 40,
          right: 15,
          left: 60,
          bottom: 60,
        },
        xAxis: [
          {
            axisLine: {
              //x轴坐标轴，false为隐藏，true为显示
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#98dcff",
            },
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            // name: 'MiB',
            type: "value",
            min: "",
            max: "",
            axisLabel: {
              color: "#98dcff",
              fontSize: 10,
              formatter: "{value}",
              show: true,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "内存使用量",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#8cd5c2", //改变折线点的颜色
                lineStyle: {
                  color: "#1077f5", //改变折线颜色
                },
              },
            },
            data: [],
          },
        ],
      },

      optionTranscript1: {
        //CPU使用==图表
        title: {
          // text: "Memory area [nonheap]",
          text: "CPU使用",
          left: "42%",
          bottom: "10px",
          textStyle: {
            color: "#98dcff",
            fontSize: "14px",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{a0}:{c0}",

          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        color: ["#00ffff"],
        grid: {
          top: 40,
          right: 15,
          left: 60,
          bottom: 60,
        },
        xAxis: [
          {
            axisLine: {
              //x轴坐标轴，false为隐藏，true为显示
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#98dcff",
            },
            type: "category",
            boundaryGap: false,
            data: [],
            axisPointer: {
              type: "shadow",
            },
            axisTick: {
              //决定是否显示坐标刻度
              alignWithLabel: true,
              show: true,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            axisTick: {
              //决定是否显示坐标刻度
              alignWithLabel: true,
              show: true,
            },
            // name: '%',
            type: "value",
            boundaryGap: false,
            min: "",
            max: "",
            axisLabel: {
              color: "#98dcff",
              fontSize: 10,
              formatter: "{value}",
              show: true,
            },
            splitLine: {
              //网格线
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
              show: true, //隐藏或显示
            },
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     color: ['#888888'],
            //     width: 1,
            //     type: 'solid'
            //   }
            // }
          },
        ],
        series: [
          {
            name: "CPU使用量",
            // data: [],
            type: "line",
            smooth: true,
            areaStyle: {
              color: "rgba(255,255,255,0.0)",
            },
            // itemStyle: {
            //   normal: {
            //     color: '#8cd5c2', //改变折线点的颜色
            //     lineStyle: {
            //       color: '#1077f5' //改变折线颜色
            //     }
            //   }
            // },
            emphasis: {
              focus: "series",
            },
            data: [],
            // lineStyle: {
            //   width: 3,
            // },
          },
        ],
      },
      optionTranscript2: {
        //磁盘使用==图表
        title: {
          // text: "Memory pool [Code Cache]",
          text: "磁盘使用",
          left: "42%",
          bottom: "10px",
          textStyle: {
            color: "#98dcff",
            fontSize: "14px",
          },
        },
        grid: {
          top: 40,
          right: 15,
          left: 60,
          bottom: 60,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        color: ["#00ff7f"],
        xAxis: [
          {
            axisLine: {
              //x轴坐标轴，false为隐藏，true为显示
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#98dcff",
            },
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            // name: 'MiB',
            type: "value",
            min: "",
            max: "",
            axisLabel: {
              color: "#98dcff",
              fontSize: 10,
              formatter: "{value}",
              show: true,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "磁盘使用量",
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {
              color: "rgba(255,255,255,0.0)",
            },
            lineStyle: {
              width: 1,
            },
          },
        ],
      },
      optionTranscript3: {
        //网络使用==图表
        title: {
          text: "网络使用",
          left: "42%",
          bottom: "10px",
          textStyle: {
            color: "#98dcff",
            fontSize: "14px",
          },
        },
        grid: {
          top: 40,
          right: 15,
          left: 60,
          bottom: 60,
        },
        color: ["#bc793d"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            axisLine: {
              //x轴坐标轴，false为隐藏，true为显示
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              fontSize: 10,
              color: "#98dcff",
            },
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              symbolSize: [5, 15],
              symbolOffset: [10, 15],
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
            // name: 'kbps',
            type: "value",
            min: "",
            max: "",
            axisLabel: {
              color: "#98dcff",
              fontSize: 10,
              formatter: "{value}",
              show: true,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#888888"],
                width: 1,
                type: "solid",
              },
            },
          },
        ],
        series: [
          {
            name: "网络使用量",
            data: [],
            type: "line",
            smooth: true,
            areaStyle: {
              color: "rgba(255,255,255,0.0)",
            },
            lineStyle: {
              width: 1,
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.getReplicaList();
  },
  // updated() {
  //   this.chartsShowEvent()
  // },
  methods: {
    // =====【接口列表】=====
    // 获取副本列表==接口
    getReplicaList() {
      let params = {
        id: this.$route.query.id,
        serviceType: this.$route.query.serviceType,
      };
      this.http.get(this.$api.monitorApi.getReplicaList, params).then((res) => {
        if (res.data.code == 0) {
          this.nodeData = res.data.data.replicaList;
          this.titleNameData = this.nodeData[0].serviceType;
          this.getServiceCommonMonitor();
        }
      });
    },
    // 获取服务监控信息==接口
    getServiceCommonMonitor() {
      this.nodeData.map((item) => {
        let paramsMonitor = {
          // serviceType: item.serviceType.type,
          deployment: item.deployment,
          namespace: item.namespace,
          podName: item.podName,
          interval: 30,
        };
        let url = this.$api.monitorApi.getServiceCommonMonitor;
        // item.serviceType.type == "common"
        //   ? this.$api.monitorApi.getServiceCommonMonitor
        //   : this.$api.monitorApi.getServiceCustomMonitor;
        this.http.get(url, paramsMonitor).then((res) => {
          if (res.data.code == 0) {
            this.chartsData = res.data.data;
            // console.log(this.chartsData);
            this.echartsInit();
          }
        });
      });
    },
    // 副本列表跳转页
    transcriptListPush(list) {
      /*  // 判断进入哪个详情页面
                let query = {
                    deployment: list.deployment,
                    serviceType: this.$route.query.serviceParamsType,
                    namespace: list.namespace,
                    podName: list.podName,
                };
                let routerParams = this.$route.query.serviceParamsType
                if (routerParams === "springboot") { //springboot(java服务)
                    this.$router.push({
                        path: "springbootMonitorDatils",
                        query
                    })
                } else if (routerParams === "mysql") {  //mysql(mysql数据库)
                    this.$router.push({
                        path: "mysqlMonitorDatils",
                        query
                    });
                } else if (routerParams === "redis缓存") {  //redis(redis缓存)
                    this.$router.push({
                        path: "redisMonitorDatils",
                        query
                    });
                } else if (routerParams === "common") {  //common(通用服务)
                    this.$router.push({
                        path: "serviceMonitorDatils",
                        query
                    });
                } else if (routerParams == "rabbitmq消息中间件") { //rabbitmq(rabbitmq消息中间件)
                    this.$router.push({
                        path: "rabbitMqMonitorDatils",
                    });
                } else if (routerParams == "postergresMonitorDatils") { //postergresMonitorDatils(XXX)
                    this.$router.push({
                        path: "postergresMonitorDatils",
                    });
                } else if (routerParams == "postergresMonitorDatils") { //postergresMonitorDatils(XXX)
                    this.$router.push({
                        path: "postergresMonitorDatils",
                    });
                }*/
    },

    echartsInit() {
      this.$nextTick(function () {
        this.nodeData.map((item) => {
          // =====内存使用情况图表=====
          let memoryContain1 = document.getElementById(item.podName + "1");
          let memory1 = this.$echarts.init(memoryContain1);
          let xAxisMemoryData = [];
          let seriesMemoryData = [];
          if (![null, [], {}].includes(this.chartsData.memory.result)) {
            this.chartsData.memory.result.map((item) => {
              xAxisMemoryData.push(this.formatDate(item[0], 2)); //得到时间的 小时:分钟
              seriesMemoryData.push(item[1]);
            });
          }
          seriesMemoryData.filter((item) => {
            return item > 0;
          });
          this.optionTranscript0.tooltip.formatter = `{b0}<br/>{a0}: {c0}${this.chartsData.memory.unit}`;
          this.optionTranscript0.xAxis[0].data = xAxisMemoryData;
          this.optionTranscript0.yAxis[0].min = Math.min(...seriesMemoryData);
          this.optionTranscript0.yAxis[0].max = Math.max(...seriesMemoryData);

          this.optionTranscript0.yAxis[0].axisLabel.formatter = `{value}${this.chartsData.memory.unit}`;

          this.optionTranscript0.series[0].data = seriesMemoryData;
          memory1.setOption(this.optionTranscript0);

          // ====CPU使用情况图表====
          let memoryContain2 = document.getElementById(item.podName + "2");
          let memory2 = this.$echarts.init(memoryContain2);
          let xAxisCpuData = [];
          let seriesCpuData = [];
          if (![null, [], {}].includes(this.chartsData.cpu.result)) {
            this.chartsData.cpu.result.map((item) => {
              xAxisCpuData.push(this.formatDate(item[0], 2)); //得到时间的 小时:分钟
              seriesCpuData.push(item[1]);
            });
          }
          seriesCpuData.filter((item) => {
            return item > 0;
          });
          this.optionTranscript1.tooltip.formatter = `{b0}<br/>{a0}: {c0}${this.chartsData.cpu.unit}`;
          this.optionTranscript1.xAxis[0].data = xAxisMemoryData;
          this.optionTranscript1.yAxis[0].min = Math.min(...seriesCpuData);
          this.optionTranscript1.yAxis[0].max = Math.max(...seriesCpuData);
          this.optionTranscript1.yAxis[0].axisLabel.formatter = `{value}${this.chartsData.cpu.unit}`;
          this.optionTranscript1.series[0].data = seriesCpuData;
          memory2.setOption(this.optionTranscript1);

          // ====磁盘使用情况图表====
          let memoryContain3 = document.getElementById(item.podName + "3");
          let memory3 = this.$echarts.init(memoryContain3);
          // if (this.chartsData.disk.result.length !== 0) {
          let xAxisDiskData = [];
          let seriesDiskData = [];
          if (![null, [], {}].includes(this.chartsData.disk.result)) {
            this.chartsData.disk.result.map((item) => {
              xAxisDiskData.push(this.formatDate(item[0], 2)); //得到时间的 小时:分钟:秒
              seriesDiskData.push(item[1]);
            });
          }
          seriesDiskData.filter((item) => {
            return item > 0;
          });
          this.optionTranscript2.tooltip.formatter = `{b0}<br/>{a0}: {c0}${this.chartsData.disk.unit}`;
          this.optionTranscript2.xAxis[0].data = xAxisDiskData;
          this.optionTranscript2.yAxis[0].min = Math.min(...seriesDiskData);
          this.optionTranscript2.yAxis[0].max = Math.max(...seriesDiskData);
          this.optionTranscript2.yAxis[0].axisLabel.formatter = `{value}${this.chartsData.disk.unit}`;
          this.optionTranscript2.series[0].data = seriesDiskData;
          memory3.setOption(this.optionTranscript2);

          // =====网络请求统计图表=====
          let memoryContain4 = document.getElementById(item.podName + "4");
          let memory4 = this.$echarts.init(memoryContain4);
          // if (this.chartsData.network.result.length !== 0) {
          let xAxisNetworkData = []; //x轴数据:时间轴
          let seriesNetworkData = []; //y轴数据:CPU平均使用率
          if (![null, [], {}].includes(this.chartsData.network.result)) {
            this.chartsData.network.result.map((item) => {
              xAxisNetworkData.push(this.formatDate(item[0], 2)); //得到时间的 小时:分钟
              seriesNetworkData.push(item[1]);
            });
          }
          seriesNetworkData.filter((item) => {
            return item > 0;
          });
          this.optionTranscript3.tooltip.formatter = `{b0}<br/>{a0}: {c0}${this.chartsData.network.unit}`;
          this.optionTranscript3.xAxis[0].data = xAxisNetworkData;
          this.optionTranscript3.yAxis[0].min = Math.min(...seriesNetworkData);
          this.optionTranscript3.yAxis[0].max = Math.max(...seriesNetworkData);
          this.optionTranscript3.yAxis[0].axisLabel.formatter = `{value}${this.chartsData.network.unit}`;
          this.optionTranscript3.series[0].data = seriesNetworkData;
          memory4.setOption(this.optionTranscript3);
        });
      });
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.rightCard .card-body {
  height: calc(100% - 78px) !important;
  overflow-y: auto;
  margin-top: 17px;
  padding: 10px 0px 18px 11px !important;
}
.first-content {
  width: 100%;
  // background-color: #fff;

  .content-item {
    // width: 510px;
    flex: 1;
    margin-right: 10px;

    .echarts {
      // width: 100%;
      height: 178px;
      .echarts-right-content {
        margin-top: 15px;
        text-align: center;
        //color: @main-font-color;
        width: 49%;
        height: 100%;
      }
    }
  }
}

.middle-content {
  width: 100%;
  // background-color: #fff;
  margin: 10px 0;

  .title {
    display: flex;
    justify-content: space-between;
    .selectTime {
      padding: 10px 30px;
      // color: @main-font-color;
    }
  }
}
.text-item {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  margin: 10px 10px 0 0;
  box-shadow: inset 0px 0px 5px 3px rgba(3, 53, 182, 0.4);
  //border: 1px solid @global-border-color;
  .text-item-item {
    text-align: center;
    border: 1px solid #dcdee2;
    flex: 1;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 5px 3px rgba(3, 53, 182, 0.4);
    // border: 1px solid @global-border-color;
    // .title{
    //   // margin-bottom: 10px;
    // }
    .content-text {
      font-size: 18px;
      font-weight: 600;
    }
  }

  // .text-item-item:last-child {
  //   margin-left: 10px;
  // }
}
.last-content {
  width: 100%;
  // background-color: #fff;

  .content-item {
    width: 100%;
    /* flex: 1; */
    margin-right: 10px;

    .echarts-main-style {
      display: flex;
      //border: 2px solid @content-border-color;
      transition: 0.2s;
      height: 280px;
      margin-bottom: 20px;
      .echarts-right-content {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        /* align-content:center; */
        padding: 35px 0 20px 40px;
        height: 100%;
        width: 40%;
        div {
          // color: @main-font-color;
          font-size: 14px;
          font-weight: 400;
          padding: 5px 0;
          margin-left: 20px;
          text-align: left;
          width: 100%;
          .transcript-name {
            width: 110px;
            display: inline-block;
          }
        }
      }
    }
  }

  .text-item {
    height: 255px;
    display: flex;
    justify-content: center;
    border: 1px solid #dcdee2;
    /* flex-direction: column; */
    /* margin: 10px 0 0 0; */
    box-shadow: inset 0px 0px 5px 3px rgba(3, 53, 182, 0.4);
    // border: 2px solid @content-border-color;
    .process-style {
      margin: 0 10px;
      width: 90%;
      text-align: center;
      // color: @main-font-color;
      div {
        font-size: 15px;
        font-weight: normal;
      }
      .process-style-text {
        margin-top: 10px;
      }
      .echarts-styles {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
      }
    }
  }
}
/deep/ .ivu-progress-text {
  //color: @main-font-color;
}
.echarts-style {
  width: 49%;
  height: 180px;
  display: flex;
  justify-content: center;
}
#main4 {
  width: 90%;
  height: 250px;
  padding: 10px 90px;
}
.content {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  flex-wrap: wrap;
  width: 100%;
}
.content-item {
  display: flex;
  justify-content: center;
  flex-direction: column;
  /* margin-bottom: 10px; */
}
.echarts-main-style:hover {
  background-color: rgba(255, 255, 255, 0.137);
}
.font-style {
  font-size: 18px;
  font-weight: 600;
  padding: 10px 20px;
  // color: @main-font-color;
}
.font-right {
  text-align: right;
  cursor: pointer;
}
.nodeIcon {
  width: 25px;
  height: 25px;
  margin-right: 20px;
}
.text-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  // color: @main-font-color;
  margin: 10px 0;
}
.goBack {
  // float: right;
  margin: 5px;
}
</style>
